<template>
    <div class="nav-class-right">
        <div class="cate_channel active">
            <div class="list-class-left">
                <ul>
                    <li v-for="(child, child_index) in productList" :key="child_index">
                        <a :title="child.title" @click="navigaionTwoClick(child, child_index, child.id)">{{ child.title
                            }}</a>
                        <a :title="child_child.title"
                            @click="navigaionThreeClick(child_child, child, child.id, child_child.id)"
                            v-for="(child_child, child_child_index) in child['children']" :key="child_child_index">{{
                            child_child.title }}</a>
                    </li>
                </ul>
                <div class="every_class"> <a @click="navigaionClick">查看全部分类
                       
                    </a> </div>
            </div>
            <!-- <div>
                <a class="nav-adv-img" href="#"><img :src="allList.ad_url" alt="导航右侧分类图片"></a>
            </div> -->
        </div>
    </div>
</template>

<script lang="ts" setup>
import { nextTick } from 'vue'
import router from '../router'

import { useNavConfig } from '../stores/navConfig'
const navConfig = useNavConfig()
const props = defineProps(['productList', 'parentIndex', 'allList']);
const navigaionClick = () => {
    navConfig.dataFill(props.allList)
    navConfig.removeMenu()
    navConfig.setClickGrade(1);
    navConfig.setTwoActiveId(0);
    navConfig.setProductPid(props.allList['id'])
    navConfig.setSelectType('all')
    nextTick(() => {
        router.push({ name: '/product' })
    })
}


const navigaionTwoClick = (item: any, child_index: number, id: number) => {

    //点击二级的时候找一级菜单
    navConfig.dataFill(props.allList)
    navConfig.setTwoNav(item)
    navConfig.setIndex(child_index)
    navConfig.setClickGrade(2);
    navConfig.setTwoActiveId(id)
    navConfig.removeThree() //清空3级
    navConfig.setProductId(item.id)
    navConfig.setProductPid(item.id)
    navConfig.setSelectType('big')
    nextTick(() => {
        router.push({ name: '/product' })
    })
}
const navigaionThreeClick = (item: any, twoChild: string[], id: number, threeid: number) => {
    //设置1一级
    navConfig.dataFill(props.allList)
    //设置二级
    navConfig.setTwoNav(twoChild)
    //设置3级
    navConfig.setThreeNav(item)
    navConfig.setTwoActiveId(id)
    navConfig.setTreeActiveId(threeid)
    navConfig.setClickGrade(3);
    navConfig.setProductId(item.id)
    navConfig.setSelectType('small')
    nextTick(() => {
        router.push({ name: '/product' })
    })
}
</script>